<template>
  <div class="report-view">
    <div class="title-container">
      <h1>环保信息上报</h1>
    </div>
    <el-steps class="report-steps" :active="stepLength" finish-status="success" align-center>
      <el-step title="选择网格信息" />
      <el-step title="填报详细信息" />
      <el-step title="信息确认" />
    </el-steps>
    <div class="report-content">
      <grid-step v-if="stepLength === 1"></grid-step>
      <aqi-step v-if="stepLength === 2"></aqi-step>
      <confirm-step v-if="stepLength === 3"></confirm-step>
      <div v-if="stepLength === 4" class="report-result">
        <el-col :sm="12" :lg="6">
          <el-result icon="success" title="反馈成功">
            <template #extra>
              <el-button type="primary" link @click="handleLink"> 点击链接查看详情 </el-button>
            </template>
          </el-result>
        </el-col>
      </div>
      <div class="report-button">
        <el-button type="primary" @click="prevStep()" :disabled="preDisabled">上一步</el-button>
        <el-button type="primary" @click="nextStep()" :disabled="nextDisabled">下一步</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import GridStep from '@/components/report/GridStep.vue'
import ConfirmStep from '@/components/report/ConfirmStep.vue'
import AqiStep from '@/components/report/AqiStep.vue'
import { useGridStore } from '@/stores/grid/grid.js'
import { showErrorMsg } from '@/utils/alterMessage.js'
import { ref } from 'vue'
import { useAqiFeedbackStore } from '@/stores/aqi/aqiFeedback.js'
import router from '@/router/index.js'

const gridStore = useGridStore()
const { gridValue } = storeToRefs(gridStore)
const aqiFeedbackStore = useAqiFeedbackStore()
const { stepLength, aqiFeedback } = storeToRefs(aqiFeedbackStore)
let nextDisabled = ref(false)
let preDisabled = ref(true)

const nextStep = () => {
  //grid校验
  if (stepLength.value === 1) {
    // 校验网格信息
    if (gridValue.value === null || gridValue.value.length === 0) {
      showErrorMsg('请选择省市信息')
      return
    }
    if (aqiFeedback.value.address === null || aqiFeedback.value.address === '') {
      showErrorMsg('请填写具体地址')
      return
    }
    if (aqiFeedback.value.information === null || aqiFeedback.value.information === '') {
      showErrorMsg('请填写描述信息')
      return
    }
  }
  if (stepLength.value === 2) {
    if (aqiFeedback.value.estimateGrade === null || aqiFeedback.value.estimateGrade === 0) {
      showErrorMsg('请选择预估污染等级')
      return
    }
    aqiFeedback.value.province = gridValue.value.join('/')
  }
  if (stepLength.value === 3) {
    // 提交信息
    const res = aqiFeedbackStore.submit()
    // console.log('反馈结果：' + res)
    if (res === false) {
      showErrorMsg('反馈失败')
    } else {
      stepLength.value++
    }
  }
  // 防止stepLength超过最大值
  if (stepLength.value < 3) {
    stepLength.value++
  }

  // 更新按钮状态
  preDisabled.value = stepLength.value === 1 || stepLength.value === 4
  nextDisabled.value = stepLength.value === 4
}

const prevStep = () => {
  if (stepLength.value > 1) {
    stepLength.value--
  }
  preDisabled.value = stepLength.value === 1 || stepLength.value === 4
  nextDisabled.value = stepLength.value === 4
}

const handleLink = () => {
  aqiFeedbackStore.clear()
  gridStore.clearData()
  router.push('/home/historyRecord')
}
</script>

<style scoped lang="scss">
.report-view {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中，使整个内容块居中 */
  .title-container {
    font-size: 24px;
    font-weight: bold;
    color: #656567;
    margin-top: 10px;
  }
  .report-steps {
    width: 800px;
    margin-top: 50px;
  }
  .report-content {
    margin-top: 40px;
    background-color: rgb(239 246 255);
    height: 450px;
    width: 400px;
    border-radius: 15px;
    border: 5px dashed rgb(161 161 170);
    box-shadow: var(--el-box-shadow-dark);
    font-weight: bold;
    .report-button {
      margin-top: 20px;
      display: flex;
      justify-content: space-around;
    }
    .report-result {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 50px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
